
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>货物分区管理</title>
  <!---引入layui框架的css样式 --->
  <link href="/lib/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<form class="layui-form" action="">
  <div class="layui-form-item" style="margin-top: 15px">

    <div class="layui-inline">
      <label class="layui-form-label">分区</label>
      <div class="layui-input-inline">
        <input type="text" id="search" autocomplete="off" class="layui-input">
      </div>
    </div>

    <input id="sear" type="button" value="查询" class="layui-btn layui-btn-primary">
    <input id="add" type="button" value="新增" class="layui-btn">
    <table id="ATable"></table>
  </div>
</form>

<%--    弹出窗口的模板--%>
<script id="template1" type="text/html">
  <form class="layui-form" action="" lay-filter="form1">

    <div class="layui-form-item">
      <div class="layui-inline">
        <label class="layui-form-label">货物分区</label>
        <div class="layui-input-inline">
          <input type="hidden" name="id">
          <input type="text" name="name" autocomplete="off" class="layui-input">
        </div>
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <input type="reset" value="重置" class="layui-btn layui-btn-primary">
        <input id="save" type="button" value="保存" class="layui-btn">
      </div>
    </div>
  </form>
</script>
<%--表格操作模板--%>
<script id="template2" type="text/html">
  <input lay-event="edit" type="button" class="layui-btn layui-btn-xs" value="编辑">
  <input lay-event="delete" type="button" class="layui-btn layui-btn-xs layui-bg-red" value="删除">
</script>

<script src="/lib/layui/layui.js"></script>

<script>
  //告诉浏览器加载layui框架中哪些组件
  //加载完小组件 就执行function
  layui.use(['table','layer','form'],function(){
    // console.log("123");
    //第一步：先对加载的组件起名字
    var table=layui.table;
    var layer=layui.layer;
    var $ = layui.jquery;
    var form = layui.form;

    //给查询按钮绑定事件
    $("#sear").on("click",function (){
      //用js发起一个请求去要一些数据回来，要到之后把数据插入到table中
      //通过table组件渲染表格
      table.render({
        elem:"#ATable",
        url:"/area?cmd=select",
        cols:[[
          {title:"ID",field:"id"},
          {title: "货物分区",field: "name"},
          {title: "操作",templet: "#template2"}
        ]],
        where:{name:$("#search").val()},
        page:true,
        limits:[5,10,20],
        limit:5
      });
    }).click();

    //给新增的按钮绑定事件
    $("#add").on("click",function (){
      layer.open({
        title:"新增用户",
        type:1,
        area:['400px','400px'],
        content:$("#template1").html()
      });


      //给保存的按钮绑定事件
      $("#save").on("click",function (){
        //1.把表单的数据都取出来
        var data = form.val("form1");
        console.log(data);
        //2.派一个人去发请求,把上边取出来的数据带过去(Ajax)
        //第一个参数：请求地址
        //第二个参数：请求时传的数据
        //第三个参数：请求成功后做什么：这个function只有200成功时才执行
        data.cmd = "save";
        $.post("/area",data,function (){
          //关窗口
          layer.closeAll();
          //给成功提示
          layer.msg("保存成功");

          //再查一遍表格的数据(点一下查询按钮)
          $("#sear").click();
        });
      })
    });
    //给表格操作绑事件
    table.on("tool",function (obj){
      var event = obj.event;
      var data = obj.data;//当前这一行的数据
      if (event==="edit"){//说明点了编辑
        //去后台获取这个商品的所有的数据,取成功了再弹出
        $.get("/area?cmd=info&id="+data.id,function (area){
          layer.open({
            title:"编辑分区",
            type:1,
            area:['400px','400px'],
            content:$("#template1").html()
          });
          form.val("form1",area);

          //给保存的按钮绑定事件
          $("#save").on("click",function (){
            //1.把表单的数据都取出来
            var data = form.val("form1");
            data.cmd = "save";
            $.post("/area",data,function (){
              //关窗口
              layer.closeAll();
              //给成功提示
              layer.msg("保存成功");
              //再查一遍表格的数据(点一下查询按钮)
              $("#sear").click();
            });
          });
        });
      }
      if (event==="delete"){//说明点了删除
        layer.confirm("您确定要删除这个分区吗？",function (){
          $.post("/area",{cmd:"delete",id:data.id},function (result){
            if (result.code===0){
              layer.closeAll();
              layer.msg("删除成功");
              $("#sear").click();
            }else {
              layer.closeAll();
              layer.msg(result.msg);
            }

          });
        },function (){});
      }
    })
  })
</script>
</body>
</html>

